<template>
  <div class="login flex-boxs flex-align-x-c flex-align-y-c">
      <div class="login-main bo-ra">
        <ul>
            <li class="flex-boxs">
                <label>帐号:</label>
                <input type="text" v-model="username" />
            </li>
            <li class="flex-boxs">
                <label>密码:</label>
                <input type="password" v-model="password" />
            </li>
            <li class="message">
                <p>{{ message }}</p>
            </li>
            <li>
                <button class="bm-btn-5 normal" @click="tryLogin">登入</button>
            </li>
        </ul>
      </div>
  </div>
</template>

<script>
import { apiLogin } from '@http'
export default {
    data () {
        return {
            username: null,
            password: null,
            message: null
        }
    },
    create () {

    },
    methods: {
        tryLogin () {
            if (!this.username) {
                this.message = '用户名不能为空'
            }
            else if (!this.password) {
                this.message = '密码不能为空'
            }
            else {
                this.fnLogin()
            }
        },
        fnLogin () {
            let userinfo = new URLSearchParams();
            userinfo.append('username', this.username);
            userinfo.append('password', this.password);
            apiLogin (userinfo)
                .then((response) => {
                    this.message = response.data.message;
                    if (response.data.status) {
                        sessionStorage.setItem('username', response.data.data)
                        this.$router.push({ path: '/home'})
                    }
                })
                .catch((error) => {
                    this.message = '请求失败'
                })
        }
    },
    watch: {
        username () {
            this.message = null
        },
        password () {
            this.message = null
        }
    }
}
</script>

<style lang="less">
@import '../assets/style/base/b-gether-var.less';
.login{position:absolute; top:0; right:0; bottom:0; left:0; background:url("../assets/img/bg-1.png") no-repeat #f0f0eb; background-size:100% auto;
  .login-main{flex:0 0 80%; padding:@20px; background:rgba(255,255,255,0.9);
    li{margin-top:@15px;
        &:first-child{margin-top:0;}
        label{flex:0 0 @35px; line-height:@35px;}
        input{flex:1; height:@35px; line-height:@35px; color:@black-01; border:none; background:none;}
        button{display:block; width:@140px; margin:auto;}
    }
    .flex-boxs{border-bottom:1px solid #999;}
    .message{height:@15px; line-height:@15px; color:@colorC;}
  }
}
</style>